<template>
  <div>
    <el-form ref="form" label-width="80px" :model="Spu">
      <el-form-item label="SPU名称">
        <el-input placeholder="SPU名称" v-model="Spu.spuName"></el-input>
      </el-form-item>
      <el-form-item label="品牌">
        <el-select placeholder="请选择品牌" v-model="Spu.tmId">
          <el-option
            :label="item.tmName"
            :value="item.id"
            v-for="item in SpuMarkList"
            :key="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="SPU描述">
        <el-input
          type="textarea"
          placeholder="SPU描述"
          v-model="Spu.description"
        ></el-input>
      </el-form-item>
      <el-form-item label="SPU图片">
        <!-- 
          图片上传路径
           action=""
           存放照片墙的图片数组
          :file-list="spuImageList"
          图片的预览
          :on-preview="handlePictureCardPreview"
          图片删除
          :on-remove="handleRemove"
           -->
        <el-upload
          action="/dev-api/admin/product/fileUpload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handlerSuccess"
          :file-list="spuImageList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <!-- 图片预览时图片放大的效果 -->
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-select :placeholder="`还有${unselect}未选择`" v-model="attrId">
          <el-option :label="item.name" :value="`${item.id}:${item.name}`" v-for="item in unselect" :key="item.id"></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-plus" :disabled="!attrId" @click="addSaleAttr">添加销售属性</el-button>
        <!-- 属性值表格区域 -->
        <el-table style="width: 100%" border :data="Spu.spuSaleAttrList">
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="saleAttrName" label="属性名" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="属性值名称列表" width="width">
            <template slot-scope="{ row, $index }">
              <el-tag
                :key="item.id"
                v-for="{item,index} in row.spuSaleAttrValueList"
                closable
                :disable-transitions="false"
                @close="handleClose(index)"
              >
                {{ item.saleAttrValueName }}
              </el-tag>
              <!-- 可以看做是button与input的切换 -->
              <el-input
                class="input-new-tag"
                v-if="row.inputVisible"
                v-model="row.inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm(row)"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput(row)"
                >添加</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row, $index }">
              <el-button type="danger" icon="el-icon-plus" size="mini" @click="DeleteSaleAttrName($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="saveOrUpdateSpu">保存</el-button>
        <el-button size="mini" @click="goScene">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "",
  props: ["scene"],
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
      //存储Spu信息数据  在添加的时候收集数据
      Spu: {
        //三级分类的id
        category3Id: 0,
        //品牌描述
        description: "",
        //品牌图片
        spuImageList: [
          {
            imgName: "",
            imgUrl: "",
            spuId: 0,
          },
        ],
        //品牌名称
        spuName: "",
        //品牌属性与属性值
        spuSaleAttrList: [
          {
            baseSaleAttrId: 0, //属性的id
            id: 0,
            saleAttrName: "",  //属性的名称
            spuId: 0,
            spuSaleAttrValueList: [  //属性值数组
              {
                baseSaleAttrId: 0,
                id: 0,
                isChecked: "",
                saleAttrName: "",
                saleAttrValueName: "",
                spuId: 0,
              },
            ],
          },
        ],
        //品牌id
        tmId: null,
      },
      //存放Spu品牌数据
      SpuMarkList: [],
      //存放Spu图片数据
      spuImageList: [],
      //存放Spu全部的销售属性
      SpuBaseSaleList: [],
      //存放未选择的销售属性的id和销售属性的名称
      attrId:'',
    };
  },
  methods: {
    //图片删除时触发的函数
    handleRemove(file, fileList) {
      //file:代表删除的那一张图片
      //fileList:删除图片之后剩余的图片
      console.log(file, fileList);
      //当删除图片之后需要收集剩余的图片
      this.spuImageList=fileList;
    },
    //图片预览时触发的函数
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //上传图片成功之后触发的事件
    handlerSuccess(response, file, fileList){
      console.log(response, file, fileList,"图片上传成功");
      //上传成功之后收集图片的信息
      this.spuImageList=fileList;
    },
    //点击取消按钮触发的事件
    goScene() {
      //子组件传递给父组件的自定义的事件，以及传递的值通知父组件切换为scene=0的页面
      this.$emit("goSceneChange", {scene:0,flag:''});
      //点击取消按钮之后清空需要发送给服务器的数据    (简便方法  清空data中的数据然后赋值给响应式数据)
      Object.assign(this._data,this.$options.data());
    },

    //自定义的方法用于发起获取子组件数据的四个请求
    async getSpuInformation(row) {
      console.log(row, "从父组件获取的需要修改的某一行的数据");

      //1.发起获取Spu信息的请求
      const result1 = await this.$API.attr.reqSpu(row.id);
      console.log(result1, "获取的Spu信息数据");
      if (result1.code == 200) {
        this.Spu = result1.data;
      }

      //2.获取Spu品牌请求
      const result2 = await this.$API.attr.reqTradeMarkList();
      console.log(result2, "获取的Spu品牌的数据");
      if (result2.code == 200) {
        this.SpuMarkList = result2.data;
      }

      //3.获取Spu图片的请求
      const result3 = await this.$API.attr.SpuImageList(row.id);
      console.log(result3, "获取的Spu图片的数据");
      if (result3.code == 200) {
        //在把服务器返回的Spu图片的数组数据赋值给spuImageList之前进行修改
        //因为照片墙数组元素中要有name,url字段
        let listAttr = result3.data;
        listAttr.forEach((item) => {
          item.name = item.imgName;
          item.url = item.imgUrl;
        });

        this.spuImageList = listAttr;
      }

      //4.获取平台全部销售属性的请求
      const result4 = this.$API.attr.reqBaseSaleList();
      console.log(result4, "获取的Spu全部销售属性的数据");
      if (result4 == 200) {
        this.SpuBaseSaleList = result4.data;
      }
    },
    //照片墙的图片删除触发的事件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //图片预览触发的事件
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    

    //删除el-tag触发的事件
    handleClose(index) {
      row.spuSaleAttrValueList.splice(index,1);
      
    },
    //点击销售属性值名称中的button触发的事件
    showInput(row) {

      //向这一行的销售属性对象中新加一个属性AttrVisable,来控制button与input的切换
      this.$set(row,'AttrVisable',true);
      //在销售属性对象中新增收集输入的销售属性值的字段,默认为空
      this.$set(row,'inputValue','');

    },
    //input失去焦点时触发的事件
    handleInputConfirm(row) {
      //在切换为button之前对输入的销售属性值进行判断  1.属性值不能重复,  2.输入的属性值不能为空
      //解构出存放新增的销售属性值名称的字段和id
      let {baseSaleAttrId,inputValue}=row;
      if(inputValue.trim()==''){
        return this.$message("输入的销售属性值不能为空");
      }
      //不能重复
      let result=row.spuSaleAttrValueList.every(item=>{
        item.saleAttrValueName!=inputValue; 
      })
      console.log(result,"判断输入的属性值名称是否重复");
      if(result==false) return;

      //当input输入框失去焦点时,切换为button
      this.AttrVisable=false;
      
      //存放新增的销售属性值的对象
      let newSaleAttrValue={baseSaleAttrId,saleAttrValueName:inputValue};
      //失去焦点之后向已有的属性值数组中新增属性值（是一个对象）
      row.spuSaleAttrValueList.push(newSaleAttrValue);


   
    },
    //点击添加销售属性按钮触发的事件
    addSaleAttr(){
      //已经从option中收集到已经选择的销售属性的id和名称 且存放在attrId字符串中
      const [baseSaleAttrId,saleAttrName]=this.attrId.split(':');
      //向Spu对象中的spuSaleAttrList数组中添加新增的销售属性(对象类型)
      let newSaleAttr={
        baseSaleAttrId,//属性id
        saleAttrName,  //属性名称
        spuSaleAttrValueList:[]  //销售属性的属性值数组
      }
      this.Spu.spuSaleAttrList.push(newSaleAttr);

      //新增完销售属性之后，清空存放销售属性的字符串attrId
      this.attrId="";

    },
    //点击删除销售属性按钮触发的事件
    DeleteSaleAttrName($index){
      //删除对应的销售属性
      Spu.spuSaleAttrList.splice($index,1);
    },
    //点击添加Spu页面的保存按钮触发的事件
    async saveOrUpdateSpu(){
      //整理添加以及修改需要携带的参数
      //对于图片需要携带imageName字段和imageUrl字段
      this.Spu.spuImageList=this.spuImageList.map((item)=>{
        return {
          imageName:item.name,
          imageUrl:(item.response && item.response.data) || item.url,
        }
      });
      //发送请求
      let result=await this.$API.spu.reqAddOrUpdateSpu(this.Spu);
      console.log(result,"保存");
      if(result.code!==200){
        return this.$message.error('保存失败')
      }else{
        this.$message.success('保存成功');
      //通知父组件回到scene=0的页面
       this.$emit("goSceneChange", {scene:0,flag:this.Spu.id?"修改":"添加"});
      }

      //保存之后清空需要提交的数据(简单方法 清空data中的数据然后赋值给响应式数据)
      Object.assign(this._data,this.$options.data());
     


    },

    //自定义的函数用于发送请求 (获取品牌和销售属性)  这里是父组件中点击添加SPU发送的两个请求
    async getSpuAndAttr(category3Id){
         //2.获取Spu品牌请求
      const result2 = await this.$API.attr.reqTradeMarkList();
      console.log(result2, "获取的Spu品牌的数据");
      if (result2.code == 200) {
        this.SpuMarkList = result2.data;
      }

          //4.获取平台全部销售属性的请求
      const result4 = this.$API.attr.reqBaseSaleList();
      console.log(result4, "获取的Spu全部销售属性的数据");
      if (result4 == 200) {
        this.SpuBaseSaleList = result4.data;
      }

      //获取三级分类的id
      this.Spu.category3Id=category3Id
    }
  },
  computed:{
    //计算销售属性还未选择的属性
    unselect(){
      //整个平台的销售属性一共有3个:尺寸，颜色，版本  存放在SpuBaseSaleList中
      //当前SPU拥有的属于自己的销售属性存放在Spu.spuSaleAttrList中

      //利用数组的过滤,过滤出还未选择的销售属性
      let result=this.SpuBaseSaleList.filter(item=>{
        return this.Spu.spuSaleAttrList.every(item1=>{  //如果自身拥有的销售属性和平台拥有的销售属性不相等就return出来
          return item.name!=item1.saleAttrName;
        })
      })
      return result;
    }
  }
};
</script>
<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>